<template>
  <view class="pages login">
    <view class="login-title jh-line-height">
      账号登录
    </view>
    <view class="c-999 jh-line-height padding-t24">
      通过手机号获取短信验证码登录
    </view>
    <view class="login-input jh-align-center" style="padding-top: 85rpx;">
      <view class="jh-flex-center padding-r10">
        <view class="font-28 c-000 padding-r10">
          +86
        </view>
        <image style="width: 30rpx;height: 30rpx;display: block;" :src="ossDomain + '/downArrow.png'"></image>
      </view>
      <input class="font-28 c-000" style="height: 100%;width: calc(100% - 100rpx);" v-model="mobile" placeholder="手机号码" type="number" maxlength="11"/>
    </view>
    <view v-if="loginType == 'code'" class="login-input jh-align-center jh-space-between">
      <input class="font-28 c-000" style="height: 100%;width: calc(100% - 170rpx);" v-model="code" placeholder="验证码" type="number" maxlength="4"/>
      <view class="login-code jh-align-center font-28" @tap="send">
        {{sendAuthCode ? '获取验证码' : count}}
      </view>
    </view>
    <view v-else class="login-input jh-align-center jh-space-between">
      <input class="font-28 c-000" style="height: 100%;width: 100%;" v-model="pass" placeholder="密码" type="text" password/>
    </view>
    <view class="login-btn c-fff jh-flex-center font-30" @tap="handleLogin()">
      登陆
    </view>
    <!-- <view class="login-tool jh-space-between">
      <view class="font-24 padding-t30 padding-b30 jh-line-height" @tap="changeLoginType()">
        {{loginType == 'code' ? '密码登陆' : '验证码登陆'}}
      </view>
      <view class="font-24 padding-t30 padding-b30 jh-line-height" @tap="$navigateTo('/pages/login/lost-pass')">
        忘记密码
      </view>
    </view> -->
    <view class="login-bottom jh-column jh-flex-center">
      <view class="jh-flex-center jh-flex-wrap" style="height: 100rpx;">
        <!-- <image style="width: 60rpx;height: 60rpx;display: block;border-radius: 50%;" :src="ossDomain + '/logo.png'"></image> -->
        <view class="font-28" style="color: #8FC31F;">华夏康养 CS</view>
      </view>
      <view class="jh-flex-center">
        <view class="padding-10" @tap='protocol = !protocol'>
          <image style="width: 24rpx;height: 24rpx;display: block;" :src="ossDomain + '/checkbox'+(protocol ? '-a' : '')+'.png'"></image>
        </view>
        <view class="font-22 c-666 ">登陆注册即表示同意</view>
        <view class="font-22" style="color: #8FC31F;">《用户协议》</view>
        <view class="font-22" style="color: #8FC31F;">《隐私条款》</view>
      </view>
      <button></button>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  // #ifdef APP-PLUS
  const trtc = uni.requireNativePlugin('tx-call');
  //#endif
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        loginType: 'code',
        mobile: '', // 13826271017
        code: '',
        pass: '',
        sendAuthCode: true,
        count: "",
        userIDList: new Array(30).fill().map((item, idx) => ('user' + idx)),
        selectedIndex: 1,
        loading: false,
        protocol: false,
        other: [
          {
            type: 'wx',
            text: '微信'
          },
          {
            type: 'qq',
            text: 'QQ'
          },
          {
            type: 'xl',
            text: '微博'
          }
        ]
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo,
        rtcConfig: state => state.global.rtcConfig,
      })
    },
    onUnload() {
      this.loading = false
    },
    methods: {
      changeLoginType () {
        if (this.loginType != 'code') {
          this.loginType = 'code'
        } else {
          this.loginType = 'pass'
        }
      },
      send () {
        if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.mobile)) {
          uni.showToast({
            title: "请输入正确的手机号码"
          })
          return;
        }
        if (!this.sendAuthCode) return;
        uni.showLoading({
          title: '验证码发送中',
          mask: true
        })
        let obj = {
          mobile: this.mobile
        }
        this.$http.send(obj).then(res => {
          uni.hideLoading()
          this.getCode()
        })
      },
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.sendAuthCode = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.sendAuthCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      // 点击登录进行初始化
      handleLogin() {
        if (!this.protocol) {
          uni.showToast({
            icon: 'none',
            title: "请勾选下方协议"
          })
          return;
        }
        if (!this.mobile) {
          uni.showToast({
            title: "请输入手机号码"
          })
          return;
        }
        if (!this.code) {
          uni.showToast({
            title: "请输入验证码",
            icon: 'none'
          })
          return;
        }
        let obj = {
          mobile: this.mobile,
          code: this.code
        }
        uni.showLoading({
          title: '正在登陆',
          mask: true
        })
        this.$http.login(obj).then(res => {
          let data = res.data || {}
          data.user = data.staff
          this.$store.dispatch('resetStore')
          this.$store.commit('setUserInfo', data);
          this.login(data)
        })
      },
      login(info) {
        let {tencent_user_id} = info.user
        tencent_user_id = String(tencent_user_id)
        let obj = {
          identifier: tencent_user_id,
          expire: 259200
        }
        
        this.$http.getUserSig(obj).then(res => {
          let {userSig, sdkappid} = res.data
          // #ifdef APP-PLUS
          trtc.login({
            sdkAppId: sdkappid,
            userId: tencent_user_id,
            userSig,
          }, res => {
            console.log('login:',res);
          })
          // #endif
          uni.$app.login({
            userID: tencent_user_id,
            userSig
          }).then(() => {
            this.$store.commit('setRtcConfig', {
              userSig: userSig,
              sdkAppID: sdkappid || 1400607227,
              userID: tencent_user_id
            });
            uni.switchTab({
              url: '/pages/index/main'
            })
          }).catch(() => {
            this.loading = false
          })
        })
      },
      choose(event) {
        this.selectedIndex = Number(event.mp.detail.value)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    background-color: #F7F8F8;
    box-sizing: border-box;
    position: relative;
  }
  .login{
    padding: 0 40rpx;
    &-title{
      padding-top: 200rpx;
      font-size: 53rpx;
      color: #000;
    }
    &-input{
      height: 85rpx;
      border-bottom: 1px solid #E0E1E1;
    }
    &-code{
      color: #00374D;
      height: 100%;
    }
    &-btn{
      width: 100%;
      height: 85rpx;
      background: #8FC31F;
      border-radius: 43rpx;
      margin-top: 85rpx;
    }
    &-tool{
      color: #00374D;
    }
    &-bottom {
      position: absolute;
      left: 50%;
      bottom: 130rpx;
      transform: translateX(-50%);
      width: 100%;
    }
  }
</style>
